<template>
  <div>
    <div class="user-data">
      <div class="user-data-box">
        <div class="user-data-box-title"><slot name="title">{{ name }}</slot></div>
        <div class="user-data-box-cont">
          {{ value }} <span class="unit">{{ unit }}</span>
        </div>
        <div v-show="isflag(valuebot)" class="user-data-box-bottom">
          <slot name="bottom">
            <div style="display: inline">
              {{ namebot }}

            </div>
          </slot>
          <span>{{ valuebot }}</span>
          {{ unitbot }}
        </div>
        <div v-show="isflag(valuebot1)" class="user-data-box-bottom" style="margin-top:10px">
          <slot name="bottom">
            <div style="display: inline">
              {{ namebot1 }}
            </div>
          </slot>
          <span>{{ valuebot1 }}</span>
          {{ unitbot1 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TonsCard",
  props: {
    value: {
      type: [String, Number],
      default: "0",
    },
    unit: {
      type: String,
      default: "单位",
    },
    name: {
      type: String,
      default: "名称",
    },
    valuebot: {
      type: [String, Number,Boolean],
      default: false,
    },
    unitbot: {
      type: String,
      default: "单位",
    },
    namebot: {
      type: String,
      default: "名称",
    },
    valuebot1: {
      type: [String, Number,Boolean],
      default: false,
    },
    unitbot1: {
      type: String,
      default: "单位",
    },
    namebot1: {
      type: String,
      default: "名称",
    },
  },
  data() {
    return {};
  },
  computed: {

  },
  methods: {
    isflag(e) {
      if (e !== "undefined" && e) {
        return true
      }
      return false
    }
  }
};
</script>

<style lang="scss" scoped>
$qfontcolor:#b5b5b5;
.user-data {
  // display: flex;
  // // flex-wrap: wrap;
  // justify-content: space-around;
  // height: 133px;
  &-box {
    // text-align: center;
    text-indent: 20px;
    &:not(:first-child) {
      border-left: 1px solid #dbd3d368;
    }
    &-title {
      color: $qfontcolor;
      font-size: 15px;
      margin-top: 20px;
    }
    &-cont {
      font-weight: 700;
      font-size: 30px;
      line-height: 50px;
      color: rgb(64, 158, 255);
      .unit {
        color: $qfontcolor;
        font-size: 11px;
        font-weight: 500;
      }
    }
    &-bottom {
      color: $qfontcolor;
      font-size: 11px;
      span {
        margin-left: 5px;
        font-size: 15px;
        color: #E53846;
        font-weight: 600;
      }
    }
  }
}
</style>
